<template>
  <div class="entity-gift-wrapper" v-if="has_package">
    <van-popup class="guide-popup" closeable round :overlay="true" v-model="showList" position="bottom">
      <entity-gift-list :virtualNum="virtual_num" :goodsInfo="goodsInfo">
      </entity-gift-list>
    </van-popup>
    <div class="entity-gift-select" @click.stop="openEntityList">
      <span class="entity-gift-desc ET1">
        <i class="iconfont icon-taocan"></i>
        {{ t('goodsCommerce_include') }}{{ goods_num }}{{ t('goodsCommerce_products') }}
        <span class="sell-out" v-if="sell_out > 0 && goods_num != sell_out">{{t('goodsCommerce_sold_out',{ num: sell_out })}}</span>
        <span class="sell-out" v-if="goods_num == sell_out">{{ t('goodsCommerce_all_sold_out') }}</span>
      </span>
      <i class="iconfont icon-zhixiang EC3 ET1"></i>
    </div>
  </div>
</template>

<script>
import entityGiftList from './entityGiftList';
import { getGoodsPackage } from '../../fetch-data';
import locale from "../../../../mixins/locale";

export default {
  name: 'goodsCommerce',
  mixins:[locale],
  components: {
    entityGiftList
  },
  data() {
    return {
      showList: false,
      goods_num: 0,// 商品数量
      has_package: false,// 是否有带货
      virtual_num: 0,// 虚拟商品的数量
      entity_num: 0,// 实物商品的数量
      sell_out: 0,// 是否有售罄商品
      hasEntityGoods: false,
      package_delivery: 0  //带货包配送方式：-1：快递和自提；1：快递配送；2：自提
    }
  },
  props: {
    // 是否需要查询售罄商品
    resSkuStock: {
      type: Number,
      default: 0
    },
    goodsInfo: {
      type: Object,
      default: () => {}
    },
    packageInfo: {
      type: Object
    }
  },
  mounted() {
    this.handlePackageInfo()
  },
  methods: {
    openEntityList() {
      this.showList = true;
    },
    handlePackageInfo() {
      const goodsPackage = this.packageInfo;
      this.goods_num = goodsPackage.goods_num;
      this.sell_out = goodsPackage.sku_stock_num;
      this.has_package = goodsPackage.has_package;
      this.virtual_num = goodsPackage.virtual_num;
      this.entity_num = goodsPackage.entity_num;
      let hasEntityGoods = this.entity_num > 0

      this.hasEntityGoods = hasEntityGoods;
      this.package_delivery = goodsPackage.package_delivery;
    },
    getGoodsPackage() {
      let param = {
        spu_id: this.goodsInfo.spu_id,
      }
      this.resSkuStock == 1 ? param.res_sku_stock = 1 : '';
      getGoodsPackage(param).then((goodsPackage) => {
        this.goods_num = goodsPackage.goods_num;
        this.sell_out = goodsPackage.sku_stock_num;
        this.has_package = goodsPackage.has_package;
        this.virtual_num = goodsPackage.virtual_goods_num;
        this.entity_num = goodsPackage.entity_goods_num;
        let hasEntityGoods = this.entity_num > 0

        this.hasEntityGoods = hasEntityGoods;
        this.package_delivery = goodsPackage.package_delivery;
      }).catch((err) => console.log(err));
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
.entity-gift-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.32rem;
  background: #fff;
}

.guide-popup {
  @include fixPosition;
}

.entity-gift-desc {
  display: inline-flex;
  align-items: center;
  line-height: .4rem;
}

.icon-icon-pagination-right {
  font-size: 0.32rem;
  color: #bfbfbf;
}

.icon-taocan {
  margin-right: .24rem;
  color: #FF882D;
  font-size: .28rem;
}

.sell-out {
  color: #999999;
}

::deep.van-popup__close-icon--top-right {
  position: absolute !important;
  font-size: 0.44rem;
}
</style>
